<template>
  <nav aria-label="Page navigation example"  v-cloak >
    <ul class="pagination justify-content-center">
      <li class="page-item text-nowarp">
        <a v-if="currentPage == 1" class="page-link">首页</a>
        <a v-else href="javascript:;" @click="next(1)" class="page-link">首页</a>
      </li>
      <li v-if="currentPage<=1" class="page-item ext-nowarp"><a class="page-link">上一页</a></li>
      <li v-else class="page-item ext-nowarp"><a href="javascript:;" @click="next(currentPage-1)" class="page-link">上一页</a></li>


      <li v-for="item in pagingList" class="page-item ext-nowarp">
        <a v-if="currentPage==item.key || sign ==item.key" class="page-link">{{item.key}}</a>
        <a v-else href="javascript:;" @click="next(item.value)" class="page-link">{{item.key}}</a>
      </li>

      <li v-if="currentPage>=totalPageCount" class="page-item"><a class="page-link ext-nowarp">下一页</a></li>
      <li v-else class="page-item ext-nowarp"><a href="javascript:;" @click="next(currentPage+1)"class="page-link ext-nowarp" >下一页</a></li>
      <li class="page-item ext-nowarp">
        <a v-if="totalPageCount == currentPage" class="page-link">尾页</a>
        <a v-else href="#" @click="next(totalPageCount)" class="page-link">尾页</a>
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    props:["total"],
    name: "ArticleMange",
    data() {
      return {
        textlist: [],
        // 省略的符号
        sign: '...',
        // 省略号位置
        signIndex: 4,
        // 总页数
        totalPageCount:this.total,
        // 当前页
        currentPage: 1,
        // 显示在页面的数组列表
        pagingList: []
      }
    },
    watch: {
      totalPageCount(val) {
        var that = this
        if (!val || val == '') return;
        that.currentPage = 1;
        that.init()
      },
      currentPage(val) {
        var that = this
        that.init()
      },
    },
    methods: {
      // 跳转到某页码
      next(num) {
        var that = this
        if (num <= 1) that.currentPage = 1;
        else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
        else that.currentPage = num;
      },
      // 初始化数据
      fetchData() {
        var that = this
        that.pagingList = [];
        var tmp = null;
        if ((that.totalPageCount) > 6) {
          if (((that.totalPageCount - 1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) >
            5) {
            for (var i = 1; i < 7; i++) {
              if (i < that.signIndex) {
                tmp = {
                  key: i,
                  value: i
                }
              } else if (i == that.signIndex) {
                tmp = {
                  key: that.sign,
                  value: 0
                }
              } else if (i == (that.signIndex + 1)) {
                tmp = {
                  key: that.totalPageCount - 1,
                  value: that.totalPageCount - 1
                }
              } else {
                tmp = {
                  key: that.totalPageCount,
                  value: that.totalPageCount
                }
              }
              that.pagingList.push(tmp)
            }
          } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)) {
            var starNum = that.totalPageCount - 5;
            for (var i = starNum; i < starNum + 6; i++) {
              tmp = {
                key: i,
                value: i
              }
              that.pagingList.push(tmp)
            }
          } else {
            var starNum = that.currentPage - 1;
            for (var i = 1; i < 7; i++) {
              if (i < that.signIndex) {
                tmp = {
                  key: (starNum - 1) + i,
                  value: (starNum - 1) + i
                }
              } else if (i == that.signIndex) {
                tmp = {
                  key: that.sign,
                  value: 0
                }
              } else if (i == (that.signIndex + 1)) {
                tmp = {
                  key: that.totalPageCount - 1,
                  value: that.totalPageCount - 1
                }
              } else {
                tmp = {
                  key: that.totalPageCount,
                  value: that.totalPageCount
                }
              }
              that.pagingList.push(tmp)
            }
          }
        } else {
          for (var i = 0; i < that.totalPageCount; i++) {
            tmp = {
              key: i + 1,
              value: i + 1
            }
            that.pagingList.push(tmp)
          }
        }
      },
      init() {
        var that = this
        that.$emit("pagechange",this.currentPage)
        that.fetchData()
      }
    },
    mounted() {
      var that = this
      that.init()
    }
  }
</script>

<style>
</style>
